import React, { useRef, useEffect, useState } from 'react';  
  
function ImageWithText({ imageUrl, text }) {  
  const [imageUrlData, setImageUrlData] = useState(null);  
  const canvasRef = useRef(null);  
  
  useEffect(() => {  
    if (!imageUrl) return; // 如果没有imageUrl，则不执行后续操作  
  
    const image = new Image();  
    image.onload = () => {  
      const canvas = canvasRef.current;  
      if (!canvas) return; // 确保canvas已挂载  
  
      const ctx = canvas.getContext('2d');  
  
      // 设置canvas大小  
      canvas.width = image.width;  
      canvas.height = image.height+30;  
  
      // 绘制图片  
      ctx.drawImage(image, 0, 0);  
  
      // 绘制文案  
      ctx.font = '30px Arial';  
      ctx.background='white';
      ctx.fillStyle = 'black';  
      ctx.textAlign = 'center';
      ctx.fillText(text, image.width/2, image.height + 20); // 根据需要调整位置和样式  
  
      // 转换为图片URL  
      const imageDataUrl = canvas.toDataURL('image/png');  
      setImageUrlData(imageDataUrl);  
    };  
    image.src = imageUrl;  
  }, [imageUrl, text]); // 依赖项数组中包含 imageUrl 和 text  
  
  return (  
    <div>  
      {imageUrlData ? <img src={imageUrlData} alt="Image with text" style={{marginBottom:50}} /> : <p>Loading...</p>}  
      <canvas ref={canvasRef} style={{ display: 'none' }}></canvas> {/* 隐藏canvas，因为它只是用于处理 */}  
    </div>  
  );  
}  
  
export default ImageWithText;